<template>
  <TemplateTitle titleName="财务收支情况"></TemplateTitle>

  <div class="chart">
    <chart-line-bar
      :chartData="chartDataList"
      xAxisName="month"
      :option="option"
      :chartType="chartType"
      :twoYAxis="true"
      :unit="unit"
      :orient="'horizontal'"
    ></chart-line-bar>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue";

import homeHttp from "@/https/home.js";
import { onMounted, ref } from "vue";
import ChartLineBar from "./charts/ChartLineBar.vue";

const chartDataList = ref([]);
const option = ref({});
const chartType = ref([
  {
    type: "bar",
    code: "operatingIncome",
    name: "营业收入",
    linerColor: ["#94e3ea", "#94e3ea"],
  },
  {
    type: "bar",
    code: "operatingCost",
    name: "营业成本",
    linerColor: ["#3ea7ea", "#3ea7ea"],
  },
  {
    type: "bar",
    code: "netProfit",
    name: "净利润",
    linerColor: ["#85c437", "#85c437"],
  },
  {
    type: "line",
    code: "incomePeCapita",
    name: "人均创收",
    linerColor: ["#b4bed7", "#b4bed7"],
  },
]);
const unit = ref(["单位:万元"]);

onMounted(() => {
  queryFinancialData();
});

const queryFinancialData = () => {
  homeHttp.queryFinancialData().then((res) => {
    if (res.data.code == 200) {
      res.data.data.forEach((item) => {
        item.month = item.month + "月";
      });
      chartDataList.value = res.data.data;
    }
  });
};
</script>

<style scoped>
.chart {
  margin-bottom: 10rem;
}
</style>
